<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>添加文章</title>
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <link rel="stylesheet" href="../plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../plugins/dropzone/min/dropzone.min.css" />
	<link rel="stylesheet" href="../plugins/dropzone/min/basic.min.css" />
	<link rel="stylesheet" href="../plugins/wangEditor/wangEditor.min.css" />
	<link rel="stylesheet" href="../plugins/iCheck/all.css">
    <link rel="stylesheet" href="../plugins/adminLTE/css/AdminLTE.css">
    <link rel="stylesheet" href="../plugins/adminLTE/css/skins/_all-skins.min.css">
    <link rel="stylesheet" href="../css/style.css">
    
    
	<script src="../plugins/jQuery/jquery-2.2.3.min.js"></script>
	<script src="../plugins/iCheck/icheck.min.js"></script>

	<script type="text/javascript" src="../plugins/angularjs/angular.min.js"></script>
	
	<!--分页组件  -->
		<script type="text/javascript" src="../plugins/angularjs/pagination.js"></script>
		<link rel="stylesheet" href="../plugins/angularjs/pagination.css">
	<!--分页结束  -->
    
    <script type="text/javascript" src="../js/base_pagination.js"></script>
	<script type="text/javascript" src="../plugins/layer/layer.js"></script>
	<script src="../plugins/bootstrap/js/bootstrap.min.js"></script>
    
</head>
<body class="hold-transition skin-red sidebar-mini" ng-app="maiworld" ng-controller="articleController">
	<div class="box-header with-border">
	     <h3 class="box-title">文章管理</h3>
	</div>
	<div class="box box-primary" >
		<div class="box-header with-border">
			<h3 class="box-title">分类筛选</h3>
		</div>
		<div class="box-body">
			<div class="row">
				<div class="col-xs-3">
					<select class="form-control" ng-model="item1Value" ng-change="selectItem2ById()">
						<option value="0">选择分类</option>
						<option ng-repeat="item in item1Arr" value="{{item.id}}">{{item.title}}</option>
					</select>
					<!-- <h1>{{selectId}}</h1> -->
				</div>
				<div class="col-xs-3">
					<select class="form-control" ng-disabled="item2" ng-model="item2Value" ng-change="selectItem3ById()">
						<option value="0">选择分类</option>
						<option ng-repeat="item in item2Arr" value="{{item.id}}">{{item.title}}</option>
					</select>
				</div>
				<div class="col-xs-3">
					<select class="form-control" ng-disabled="item3" ng-model="item3Value" ng-change="selectItem4ById()">
						<option value="0">选择分类</option>
						<option ng-repeat="item in item3Arr" value="{{item.id}}">{{item.title}}</option>
					</select>
				</div>
				<div class="col-xs-3">
					<button type="button" class="btn btn-primary" ng-click="searchByClassId()">
						<i class="fa fa-search"></i> 搜索
					</button>
				</div>
			</div>
		</div>
		<!-- /.box-body -->
	</div>
	
    <div class="box">
    		<!-- /.box-header -->
            <div class="box-header with-border">
              <span class="box-title" style="margin-right:20px;">文章列表</span>
              <button class="btn btn-primary" ng-click="deleteByArr()"><i class="fa fa-fw fa-trash-o"></i>批量删除</button>

            </div>
            <!-- /.box-body -->
            <div class="box-body">
              <!--数据列表-->
                 <table id="dataList" class="table table-bordered table-striped table-hover dataTable">
                     <thead>
                         <tr>
                             <th class="" style="padding-right:0px">
                                 <input id="selall" type="checkbox" class=" minimal checkbox-master" ng-click="allSelection($event)">
                             </th> 
						  <th class="sorting_asc">ID</th>
					      <th class="sorting">标题</th>									      
					      <th class="sorting">缩略图</th>
					      <th class="sorting">视频</th>
					      <th class="sorting">视频时长</th>
					      <th class="sorting">项目通过率</th>
					      <th class="sorting">文章内容</th>
					      <th class="sorting">浏览量</th>
					      <th class="sorting">点赞</th>
					      <th class="sorting">所属分类</th>
					      <th class="sorting">所属驾校</th>
					      <th class="sorting">创建时间</th>
                    	  <th class="text-center">操作</th>
                         </tr>
                     </thead>
                     <tbody>
                       	<tr ng-repeat="new in newslist">
                       		<td><input id="{{new.id}}" type="checkbox" class="minimal" ng-click="updateSelection($event,new.id)"></td>  
                       		<td>
                       			{{new.id}}
                       		</td>
                       		<td>
                       			{{new.title}}
                       		</td> 
                       		<td>
                       			<div>
                       				<img ng-src="{{new.imgUrl1}}" ng-if="new.imgUrl1 != null" style="width:80px;"></img>
									<img ng-src="{{new.imgUrl2}}" ng-if="new.imgUrl2 != null" style="width:80px;"></img>
									<img ng-src="{{new.imgUrl3}}" ng-if="new.imgUrl3 != null" style="width:80px;"></img>
                       			</div>
                       		</td>
                       		<td>
                       			<video width="200" controls id="video" ng-src="{{trustUrl(new.videoUrl)}}" ng-show="new.videoUrl != null"  playsinline webkit-playsinline="true" x5-video-player-type="h5"></video>
                       		</td>
                       		<td>
                       			{{new.time}}
                       		</td>
                       		<td>
                       			{{new.passnum}}
                       		</td>
                       		<td>
                       			...
                       		</td>
                       		<td>
                       			{{new.browseNum}}
                       		</td>
                       		<td>
                       			{{new.likeNum}}
                       		</td>
                       		<td>
                       			{{new.className}}
                       		</td>
                       		<td>
                       			{{new.statusName}}
                       		</td>
                       		<td>
                       			{{new.created}}
                       		</td>
                       		<td>
                       			<button class="btn btn-info" data-toggle="modal" data-target="#modal-default" ng-click="showDetail($index)">查看详情</button>
                       		</td>                    		
                       	</tr>		            
                     </tbody>
                 </table>
              <!--数据列表/-->
              
            </div>
            <!-- 分页 -->
            <div class="box-footer clearfix">
				<!-- 分页 -->
				<tm-pagination conf="paginationConf"></tm-pagination>
            </div>
          </div>
   <!-- /.box -->      
	
	
	   <div class="modal fade" id="modal-default">
          <div class="modal-dialog" style="width:80%;">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">修改文章</h4>
              </div>
              <div class="modal-body">
<!-- 分类 -->
<div class="box box-primary">
		<div class="box-header with-border">
			<h3 class="box-title">选择分类</h3>
		</div>
		<div class="box-body">
			<div class="row">
				<div class="col-xs-3">
					<select class="form-control" ng-model="item1Value" ng-change="selectItem2ById()">
						<option value="0">选择分类</option>
						<option ng-repeat="item in item1Arr" value="{{item.id}}">{{item.title}}</option>
					</select>
					<!-- <h1>{{selectId}}</h1> -->
				</div>
				<div class="col-xs-3">
					<select class="form-control" ng-disabled="item2" ng-model="item2Value" ng-change="selectItem3ById()">
						<option value="0">选择分类</option>
						<option ng-repeat="item in item2Arr" value="{{item.id}}">{{item.title}}</option>
					</select>
				</div>
				<div class="col-xs-3">
					<select class="form-control" ng-disabled="item3" ng-model="item3Value" ng-change="selectItem4ById()">
						<option value="0">选择分类</option>
						<option ng-repeat="item in item3Arr" value="{{item.id}}">{{item.title}}</option>
					</select>
				</div><!-- 
				<div class="col-xs-3">
					<select class="form-control" ng-disabled="item4" ng-model="item3Value" ng-change="selectItem5ById()">
						<option>选择分类</option>
						<option>option 2</option>
						<option>option 3</option>
						<option>option 4</option>
						<option>option 5</option>
					</select>
				</div> -->
			</div>
		</div>
		<!-- /.box-body -->
	</div>
<!-- 分类 -->

<!-- 文章内容 -->
	         <!-- Horizontal Form -->
          <div class="box box-info">
            <div class="box-header with-border">
              <h3 class="box-title">文章内容</h3>
            </div>
            <!-- /.box-header -->
            <!-- form start -->
            <div class="form-horizontal">
              <div class="box-body">
                <div class="form-group">
                  <label for="inputEmail3" class="col-sm-2 control-label">标题</label>

                  <div class="col-sm-10">
                    <input type="text" class="form-control" ng-model="title" id="title" placeholder="请输入文章标题">
                  </div>
                </div>
                <div class="form-group">
                  <label for="inputPassword3" class="col-sm-2 control-label"></label>
                  <div class="col-sm-10">
                  	<div style="color:red;font-size:12px;">最多上传1张</div>
                    <div id="dropz" class="dropzone"></div>
                  </div>
                </div>
                <div class="form-group">
                  <label for="inputPassword3" class="col-sm-2 control-label">缩略图1</label>
                  <div class="col-sm-10">
                    <input type="text" disabled  class="form-control" id="suolue1" placeholder="缩略图路径">
                  </div>
                </div>
                <div class="form-group">
                  <label for="inputPassword3" class="col-sm-2 control-label"></label>
                  <div class="col-sm-10">
                  	<div style="color:red;font-size:12px;">最多上传1张</div>
                    <div id="dropz2" class="dropzone"></div>
                  </div>
                </div>
                <div class="form-group">
                  <label for="inputPassword3" class="col-sm-2 control-label">缩略图2</label>
                  <div class="col-sm-10">
                    <input type="text" disabled  class="form-control" id="suolue2" placeholder="缩略图路径">
                  </div>
                </div>
                <div class="form-group">
                  <label for="inputPassword3" class="col-sm-2 control-label"></label>
                  <div class="col-sm-10">
                  	<div style="color:red;font-size:12px;">最多上传1张</div>
                    <div id="dropz3" class="dropzone"></div>
                  </div>
                </div>
                <div class="form-group">
                  <label for="inputPassword3" class="col-sm-2 control-label">缩略图3</label>
                  <div class="col-sm-10">
                    <input type="text" disabled  class="form-control" id="suolue3" placeholder="缩略图路径">
                  </div>
                </div>
				
				<div class="form-group">
					  <label for="inputPassword3" class="col-sm-2 control-label">视频上传</label>
	                  <div class="col-sm-3">
	                    <input type="file" file-model="myFile">
	                  </div>
	                  <div class="col-sm-7">
	                    <button type="submit" class="btn btn-primary" ng-click="save()">上传</button>
	                  </div>
                </div>
                
                <div class="form-group" >
					<label for="inputPassword3" class="col-sm-2 control-label">视频</label>
					<div class="col-sm-10">
						<video width="320" controls id="video" ng-src="{{videoUrl}}"  playsinline webkit-playsinline="true" x5-video-player-type="h5">
						</video>
					</div>
				</div>
				
								<div class="form-group">
                  <label for="inputPassword3" class="col-sm-2 control-label">视频时长</label>
                  <div class="col-sm-10">
                    <input type="text"  class="form-control" id="time" placeholder="请输入视频时长，例：10:05">
                  </div>
                </div>
                
                <div class="form-group">
                  <label for="inputPassword3" class="col-sm-2 control-label">项目通过率</label>
                  <div class="col-sm-10">
                    <input type="text"  class="form-control" id="passnum" placeholder="请输入通过率，数字类型，例：75">
                  </div>
                </div>
                
				<div class="form-group" >
					<label for="inputPassword3" class="col-sm-2 control-label">文章内容</label>
					<div class="col-sm-10">
						<div id="editor"></div>
						<input type="hidden" id="contentHtml"></input>
					</div>
				</div>
                
            <!--     <div class="form-group">
                  <label for="inputPassword3" class="col-sm-2 control-label">所属分校</label>
                  <div class="col-sm-10">
                    <select class="form-control" ng-model="selectStatus">
							<option value="0">选择所属分校</option>
							<option ng-repeat="item in schoolList" value="{{item.id}}">{{item.name}}</option>
					</select>
                  </div>
                </div> -->
                
                
              </div>

            </div>
          </div>
<!-- 文章内容  -->
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default pull-left"  data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" ng-click="saveContent()">提交修改</button>
              </div>
            </div>
            <!-- /.modal-content -->
          </div>
          <!-- /.modal-dialog -->
        </div>
        <!-- /.modal -->
          
	
	<script type="text/javascript" src="../plugins/wangEditor/wangEditor.min.js"></script>
	<script type="text/javascript" src="../plugins/wangEditor/js/plupload/plupload.full.min.js"></script>
    <script type="text/javascript" src="../plugins/wangEditor/js/plupload/i18n/zh_CN.js"></script>
    <script type="text/javascript" src="../plugins/wangEditor/js/qiniu.js"></script>
	<script type="text/javascript" src="../plugins/dropzone/dropzone.js"></script>
	<script type="text/javascript" src="../js/service/articleService.js"></script>
    <script type="text/javascript" src="../js/controller/baseController.js"></script>
    <script type="text/javascript" src="../js/controller/articleController.js"></script>
	<script type="text/javascript">
	// 激活 iCheck
/* 	setTimeout(function(){
		$('input[type="checkbox"].minimal, input[type="radio"].minimal').iCheck({
		    checkboxClass: 'icheckbox_minimal-blue',
		    radioClass   : 'iradio_minimal-blue'
		});
	},1000) */

		
		//编辑器
		var E = window.wangEditor;
		var editor = new E('#editor');
		// 允许上传到七牛云存储
		editor.customConfig.qiniu = true;
	    editor.customConfig.onchange = function (html) {
	        // html 即变化之后的内容
//	        console.log(html);
	        $('#contentHtml').val(html);
	    }
		editor.create();

		
		// 初始化七牛上传
		uploadInit()
		// 初始化七牛上传的方法
		function uploadInit() {
		    // 获取相关 DOM 节点的 ID
		    var btnId = editor.imgMenuId;
		    var containerId = editor.toolbarElemId;
		    var textElemId = editor.textElemId;

		    // 创建上传对象
		    var uploader = Qiniu.uploader({
		        runtimes: 'html5,flash,html4',    //上传模式,依次退化
		        browse_button: btnId,       //上传选择的点选按钮，**必需**
		        uptoken_url: '/article/uptoken.do',
		            //Ajax请求upToken的Url，**强烈建议设置**（服务端提供）
		         //uptoken : '<Your upload token>',
		            //若未指定uptoken_url,则必须指定 uptoken ,uptoken由其他程序生成
		        // unique_names: true,
		            // 默认 false，key为文件名。若开启该选项，SDK会为每个文件自动生成key（文件名）
		        // save_key: true,
		            // 默认 false。若在服务端生成uptoken的上传策略中指定了 `sava_key`，则开启，SDK在前端将不对key进行任何处理
		        domain: 'http://static.sanfeng.maiworld.net/',
		            //bucket 域名，下载资源时用到，**必需**
		        container: containerId,           //上传区域DOM ID，默认是browser_button的父元素，
		        max_file_size: '100mb',           //最大文件体积限制
		        flash_swf_url: '../js/plupload/Moxie.swf',  //引入flash,相对路径
		        filters: {
		                mime_types: [
		                  //只允许上传图片文件 （注意，extensions中，逗号后面不要加空格）
		                  { title: "图片文件", extensions: "jpg,gif,png,bmp" }
		                ]
		        },
		        max_retries: 3,                   //上传失败最大重试次数
		        dragdrop: true,                   //开启可拖曳上传
		        drop_element: textElemId,        //拖曳上传区域元素的ID，拖曳文件或文件夹后可触发上传
		        chunk_size: '4mb',                //分块上传时，每片的体积
		        auto_start: true,                 //选择文件后自动上传，若关闭需要自己绑定事件触发上传
		        init: {
		            'FilesAdded': function(up, files) {
		                plupload.each(files, function(file) {
		                    // 文件添加进队列后,处理相关的事情
		                    printLog('on FilesAdded');
		                });
		            },
		            'BeforeUpload': function(up, file) {
		                // 每个文件上传前,处理相关的事情
		                printLog('on BeforeUpload');
		            },
		            'UploadProgress': function(up, file) {
		                // 显示进度
		                printLog('进度 ' + file.percent)
		            },
		            'FileUploaded': function(up, file, info) {
		                // 每个文件上传成功后,处理相关的事情
		                // 其中 info 是文件上传成功后，服务端返回的json，形式如
		                // {
		                //    "hash": "Fh8xVqod2MQ1mocfI4S4KpRL6D98",
		                //    "key": "gogopher.jpg"
		                //  }
		                printLog(info);
		                // 参考http://developer.qiniu.com/docs/v6/api/overview/up/response/simple-response.html
		                
		                var domain = up.getOption('domain');
		                var res = $.parseJSON(info);
		                var sourceLink = domain + res.key; //获取上传成功后的文件的Url

		                printLog(sourceLink);

		                // 插入图片到editor
		                editor.cmd.do('insertHtml', '<img src="' + sourceLink + '" style="max-width:100%;"/>')
		            },
		            'Error': function(up, err, errTip) {
		                //上传出错时,处理相关的事情
		                printLog('on Error');
		            },
		            'UploadComplete': function() {
		                //队列文件处理完毕后,处理相关的事情
		                printLog('on UploadComplete');
		            }
		            // Key 函数如果有需要自行配置，无特殊需要请注释
		            //,
		            // 'Key': function(up, file) {
		            //     // 若想在前端对每个文件的key进行个性化处理，可以配置该函数
		            //     // 该配置必须要在 unique_names: false , save_key: false 时才生效
		            //     var key = "";
		            //     // do something with key here
		            //     return key
		            // }
		        }
		        // domain 为七牛空间（bucket)对应的域名，选择某个空间后，可通过"空间设置->基本设置->域名设置"查看获取
		        // uploader 为一个plupload对象，继承了所有plupload的方法，参考http://plupload.com/docs
		    });
		}

		// 封装 console.log 函数
		function printLog(title, info) {
		    window.console && console.log(title, info);
		}
		
		//dropzone图片上传
		//不可以放在JQ中
		//关闭自动发现
		Dropzone.autoDiscover =false;
		var myDropzone = new Dropzone("#dropz", {
		    url: "/article/upload.do", // 文件提交地址
		    method: "post",  // 也可用put
		    paramName: "dropFile", // 默认为file
		    maxFiles: 1,// 一次性上传的文件数量上限
		    maxFilesize: 5, // 文件大小，单位：MB
		    acceptedFiles: ".jpg,.gif,.png,.jpeg", // 上传的类型
		    addRemoveLinks: true,
		    uploadMultiple: true,
		    parallelUploads: 1,// //最大并行处理量
		    //previewsContainer:"#preview", // 上传图片的预览窗口
		    dictDefaultMessage: '拖动文件至此或者点击上传',
		    dictMaxFilesExceeded: "您最多只能上传3个文件！",
		    dictResponseError: '文件上传失败!',
		    dictInvalidFileType: "文件类型只能是*.jpg,*.gif,*.png,*.jpeg。",
		    dictFallbackMessage: "浏览器不受支持",
		    dictFileTooBig: "文件过大上传文件最大支持.",
		    dictRemoveLinks: "删除",
		    dictCancelUpload: "取消",
		    dictRemoveFile:"删除",
		    init: function () {
		        this.on("addedfile", function (file) {
		            // 上传文件时触发的事件
		        });
		        this.on("success", function (file, data) {
		            // 上传成功触发的事件
		            console.log(data.result,'上传图片成功');
		            $('#suolue1').val(data.result[0]);
		        });
		        this.on("error", function (file, data) {
		            // 上传失败触发的事件
		            console.log(data,'上传图片失败')
		        });
		        this.on("removedfile", function (file) {
		            // 删除文件时触发的方法
		        	$('#suolue1').val('');
		        });
		    }
		});
		
		var myDropzone2 = new Dropzone("#dropz2", {
		    url: "/article/upload.do", // 文件提交地址
		    method: "post",  // 也可用put
		    paramName: "dropFile", // 默认为file
		    maxFiles: 1,// 一次性上传的文件数量上限
		    maxFilesize: 5, // 文件大小，单位：MB
		    acceptedFiles: ".jpg,.gif,.png,.jpeg", // 上传的类型
		    addRemoveLinks: true,
		    uploadMultiple: true,
		    parallelUploads: 1,// //最大并行处理量
		    //previewsContainer:"#preview", // 上传图片的预览窗口
		    dictDefaultMessage: '拖动文件至此或者点击上传',
		    dictMaxFilesExceeded: "您最多只能上传3个文件！",
		    dictResponseError: '文件上传失败!',
		    dictInvalidFileType: "文件类型只能是*.jpg,*.gif,*.png,*.jpeg。",
		    dictFallbackMessage: "浏览器不受支持",
		    dictFileTooBig: "文件过大上传文件最大支持.",
		    dictRemoveLinks: "删除",
		    dictCancelUpload: "取消",
		    dictRemoveFile:"删除",
		    init: function () {
		        this.on("addedfile", function (file) {
		            // 上传文件时触发的事件
		        });
		        this.on("success", function (file, data) {
		            // 上传成功触发的事件
		            console.log(data.result,'上传图片成功');
		            $('#suolue2').val(data.result[0]);
		        });
		        this.on("error", function (file, data) {
		            // 上传失败触发的事件
		            console.log(data,'上传图片失败')
		        });
		        this.on("removedfile", function (file) {
		            // 删除文件时触发的方法
		        	 $('#suolue2').val('');
		        });
		    }
		});
		
		var myDropzone3 = new Dropzone("#dropz3", {
		    url: "/article/upload.do", // 文件提交地址
		    method: "post",  // 也可用put
		    paramName: "dropFile", // 默认为file
		    maxFiles: 1,// 一次性上传的文件数量上限
		    maxFilesize: 5, // 文件大小，单位：MB
		    acceptedFiles: ".jpg,.gif,.png,.jpeg", // 上传的类型
		    addRemoveLinks: true,
		    uploadMultiple: true,
		    parallelUploads: 1,// //最大并行处理量
		    //previewsContainer:"#preview", // 上传图片的预览窗口
		    dictDefaultMessage: '拖动文件至此或者点击上传',
		    dictMaxFilesExceeded: "您最多只能上传3个文件！",
		    dictResponseError: '文件上传失败!',
		    dictInvalidFileType: "文件类型只能是*.jpg,*.gif,*.png,*.jpeg。",
		    dictFallbackMessage: "浏览器不受支持",
		    dictFileTooBig: "文件过大上传文件最大支持.",
		    dictRemoveLinks: "删除",
		    dictCancelUpload: "取消",
		    dictRemoveFile:"删除",
		    init: function () {
		        this.on("addedfile", function (file) {
		            // 上传文件时触发的事件
		        });
		        this.on("success", function (file, data) {
		            // 上传成功触发的事件
		            console.log(data.result,'上传图片成功');
		            $('#suolue3').val(data.result[0]);
		        });
		        this.on("error", function (file, data) {
		            // 上传失败触发的事件
		            console.log(data,'上传图片失败')
		        });
		        this.on("removedfile", function (file) {
		            // 删除文件时触发的方法
		        	$('#suolue3').val('');
		        });
		    }
		});
	</script>

</body>
</html>